<template>
  <div class="shop">
    <el-form>
      <el-form-item label="所属区域:">
        <el-select
          style="width:130px;"
          v-model="form.province_id"
          filterable
          placeholder="省份"
          @change="onChangeProvince"
        >
          <el-option
            v-for="item in provinceList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
        <el-select style="width:130px;" v-model="form.city_id" filterable placeholder="市" @change="onChangeCity">
          <el-option v-for="item in cityList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
        <el-select style="width:130px;" v-model="form.region_id" filterable placeholder="区">
          <el-option v-for="item in areaList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <div class="search">
      <el-button class="addBtn" type="primary" @click="isAddshopgroup = true">新增商户分组</el-button>
      <div class="search_btn">
        <el-input class="input" v-model="form.keywords" placeholder="输入分类名称或ID搜索" clearable></el-input>
        <el-button type="primary" @click="searchShopGroup">搜索</el-button>
      </div>
    </div>

    <el-table
      class="table"
      :data="tableData"
      style="width:100%"
      max-height="680"
      :cell-style="tc"
      :header-cell-style="tccolor"
    >
      <el-table-column prop="id" label="分组ID" ></el-table-column>
      <el-table-column prop="name" label="商户分组名称" ></el-table-column>
      <el-table-column prop="num" label="商户数" ></el-table-column>
      <el-table-column label="商户区域" >
        <template slot-scope="scope">{{scope.row.province}} {{scope.row.city}} {{scope.row.area}}</template>
      </el-table-column>
      <el-table-column label="分组有效期" width='180' >
        <template slot-scope="scope">{{scope.row.start_time}}--{{scope.row.end_time}}</template>
      </el-table-column>
      <el-table-column label="操作" fixed='right' >
        <template slot-scope="scope">
          <el-button size="mini" @click="openShopGruopDetail(scope.row.id)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="新增商户联盟" :visible.sync="isAddshopgroup" center>
      <el-form :model="shopform">
        <el-form-item label="商户分组名称">
          <el-input
            style="width:70%;"
            type="text"
            placeholder="请输入门店名称"
            v-model="shopform.name"
            maxlength="24"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="分组有效期">
           <el-date-picker
      v-model="shopform.start_time"
      type="datetime"
      value-format="yyyy-MM-dd hh:mm:ss"
      placeholder="选择开始时间">
    </el-date-picker> 至 <el-date-picker
      v-model="shopform.end_time"
      type="datetime"
      value-format="yyyy-MM-dd hh:mm:ss"
      placeholder="选择结束时间"></el-date-picker>
          <!-- :picker-options="timeOptions" -->
          <!-- &nbsp;&nbsp;
          <el-checkbox v-model="shopform.isAllvalited">长期有效</el-checkbox> -->
        </el-form-item>

        <el-form-item label="分组所属区域">
          <el-select
          style="width:130px;"
          v-model="shopform.province_id"
          filterable
          placeholder="省份"
          @change="onChangeshopProvince"
        >
          <el-option
            v-for="item in provinceList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
        <el-select
          style="width:130px;"
          v-model="shopform.city_id"
          filterable
          placeholder="市"
          @change="onChangeshopCity"
        >
          <el-option v-for="item in cityList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
        <el-select style="width:130px;" v-model="shopform.region_id" filterable placeholder="区">
          <el-option
            v-for="item in areaList"
            :key="item.id"
            :label="item.name"
            :value="item.areaCode"
          ></el-option>
        </el-select>
        </el-form-item>

        <el-form-item>最少需要添加2个商家才能组成商户联盟,最多添加10家,如有特殊情况请联系技术处理</el-form-item>

        <el-form-item v-for="(item,index) of shoplist" :key="index" class="select_shop">
          <el-row>
            <el-col v-if="index > 0" :span="24">
              <i class="el-icon-close delete_shoplist" @click="deleteShoplistdata(index)"></i>
            </el-col>
            <el-col :span="4">
              <el-button type="primary" @click="selectShopSeller">选择商家</el-button>
            </el-col>
            <el-col :span="16">
              <el-input placeholder="商家名称" v-model="item.name" :disabled="true"></el-input>
            </el-col>
            <el-col :span="4">
              <el-input placeholder="UID" v-model="item.id" :disabled="true"></el-input>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-input placeholder="商家地址" v-model="item.address" :disabled="true"></el-input>
            </el-col>
            <el-col :span="8">
              <el-input placeholder="联系电话" v-model="item.tel" :disabled="true"></el-input>
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item>
          <div class="add_shop" @click="addShopGroupFormlist">+ 添加商户</div>
        </el-form-item>
      </el-form>

      <el-dialog title="选择商户" :visible.sync="isShowSelectShop" center append-to-body>
        <el-form>

          <p>提示：选择商家时系统将为您过滤已参与其他联盟且仍在有效期中的商户</p>
          <el-row>
            <el-col   :span="12">
              <el-input v-model="keywords" placeholder="输入商家名称搜索" clearable></el-input>
            </el-col>
            <el-button class="select_btn_shop" type="primary" @click="searchvouchlist">搜索</el-button>
          </el-row>
          <el-table
            :data="selectShopdata"
            border
            highlight-current-row
    @current-change="handleCurrentChange"
            :cell-style="tc"
            :header-cell-style="tccolor"
          >
            <el-table-column prop="name" label="商户名称" ></el-table-column>
            <el-table-column prop="address" label="地址信息" ></el-table-column>
            <el-table-column prop="username" label="联系人" ></el-table-column>
            <el-table-column prop="tel" label="联系方式" ></el-table-column>
          </el-table>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="isShowSelectShop = false">取 消</el-button>
          <el-button type="primary" @click="selectShopInfo">保存</el-button>
        </div>
      </el-dialog>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isAddshopgroup = false">取 消</el-button>
        <el-button type="primary" @click="submitShopgroupInfo">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import { shopGroupList, provinceCityArea, shopSellerSelect,shopAddModifyUnion } from "@/api/goods";

export default {
  data() {
    return {
      isAddshopgroup: false,
      isShowSelectShop: false,

      form: {
        province_id: "",
        city_id: "",
        region_id: "",
        keywords: ""
      },
      provinceList: [],
      cityList: [],
      areaList: [],
      tableData: [],
      shopform: {
        name: "",
        start_time: "",
        end_time:'',
        province_id: "",
        city_id:'',
        region_id:'',
        seller_id:[],
        id:'',
      },

      shoplist: [{}],
      keywords: "",
      //选择商户信息
      selectShopDetail: {},
      //商户分类列表
      selectShopdata: [],

      currentRow: false,
      shopdetailInfoList: []
    };
  },
  mounted() {
    this.getshopGroupList();
    this.getProvinceDataList("1", "0");
  },
  methods: {
    //搜索小店分组
    searchShopGroup() {
      this.getshopGroupList();
    },
     tc() {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor() {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },
    async getshopGroupList() {
      let res = await shopGroupList(this.form);
      console.log(res)
      if (res.code === 10000) {
        this.tableData = res.data.data;
      }
    },
    async getProvinceDataList(t, p) {
      let res = await provinceCityArea({ type: t, pid: p });

      if (res.code === 10000) {
        if (t === "1") {
          this.provinceList = res.data;
        } else if (t === "2") {
          this.cityList = res.data;
        } else {
          this.areaList = res.data;
        }
      }
    },
    onChangeProvince(e) {
      //切换省,同时获取省对应的城市 e是城市对应的id

      this.form.province_id = e;
      //后面加获取对应省的城市接口
      this.form.city_id = "";
      this.form.region_id = "";
      this.getProvinceDataList("2", e);
    },
     onChangeCity(e) {
      this.form.city_id = e;
      this.form.region_id = "";
      //获取对应城市的区
      this.getProvinceDataList("3", e);
    },
    onChangeshopProvince(e){
         this.shopform.province_id = e;
      //后面加获取对应省的城市接口
      this.shopform.city_id = "";
      this.shopform.region_id = "";
      this.getProvinceDataList("2", e);
    },
    onChangeshopCity(e){
        this.shopform.city_id = e;
      this.shopform.region_id = "";
      //获取对应城市的区
      this.getProvinceDataList("3", e);
    },

    //打开商户分组详情
    openShopGruopDetail(id) {
      // this.$router.push("./shopgroupDetail");
      this.$router.push({
        path: "./shopgroupDetail",
        query: { cid: id }
      });
    },
    selectShopSeller() {
      this.isShowSelectShop = true;
      this.getshopSellerSelectList();
    },
    //新增商户联盟
    submitShopgroupInfo() {

      if(this.shopform.name.length === 0){

        this.$message.error('请填写联盟名称')
        return
      }
       if(this.shopform.start_time.length === 0){

        this.$message.error('请选择开始时间')
        return
      }
       if(this.shopform.end_time.length === 0){

        this.$message.error('请选择结束时间')
        return
      }
      if(this.shoplist.length === 1){

        this.$message.error('请选择两家商户')
        return
      }
      var arr = []
         for(var  i = 0; i < this.shoplist.length;i++){
               arr.push(this.shoplist[i].uid)
         }

        this.shopform.seller_id= JSON.stringify([...arr]);



      this.getshopAddModifyUnionData()
    },
    async getshopAddModifyUnionData(){

      let res =  await shopAddModifyUnion(this.shopform);
      if(res.code === 10000){
        this.$message.success('新增商户分组成功')
        this.isAddshopgroup = false;
      }else{
        this.$message.error(res.message)
      }

    },
    addShopGroupFormlist() {
      if (this.shoplist.length === 10) {
        this.$message.error("最多添加10个");
        return;
      } else {
        this.shoplist.push({});
      }
    },
    //选择商户
    selectShopInfo() {
      if(this.selectShopDetail){
        this.isShowSelectShop = false;
        console.log(this.selectShopDetail)
        this.shoplist.pop()
        this.shoplist.unshift(this.selectShopDetail)
      }else{
        this.$message.error('请选择一个商家')
      }
    },

    //选择商户信息
    selectShopInfodetail(row, e) {
      console.log(e, row);
      if(e){
        this.selectShopDetail = row
      }else{
        this.selectShopDetail = null
      }
    },
    //删除商户信息
    deleteShoplistdata(index) {
      if (this.shoplist.length === 1) {
        this.$message.error("最少一个");
      } else {
        this.shoplist.splice(index, 1);
      }
    },
    searchvouchlist() {
      this.getshopSellerSelectList();
    },
    handleCurrentChange(val) {
        this.selectShopDetail = val;
    },
    //获取商户列表
    async getshopSellerSelectList() {
      let res = await shopSellerSelect({ keywords: this.keywords });
      console.log(res.data);
      this.selectShopdata = res.data.data;
    }
  }
};
</script>

<style lang="scss" scoped>
.shop {
  padding: 20px;
  position: relative;

  .search {
    float: right;
    .input {
      width: 200px;
      // margin-top: 50px;
    }
    .search_btn {
      margin-top: 0px;
    }
    .addBtn {
      position: absolute;
      right: 20px;
      top: 20px;
    }
  }
  .select_shop_att {
    text-align: center;
    border: 1px solid #e5e5e5;
    line-height: 36px;
    margin-left: 16px;
    margin-bottom: 10px;
  }
  .delete_shoplist {
    float: right;
  }
  .select_shop {
    padding: 10px;
    border: 1px dashed #a8a8a8;
  }

  .add_shop {
    text-align: center;
    border: 1px solid #a8a8a8;
  }
  .table {
    margin-top: 72px;
  }


}
</style>
